/*
 * @Descripttion:
 * @version:
 * @Author: congsir
 * @Date: 2023-10-20 23:31:33
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-10-24 20:26:24
 */
/*
 * @Descripttion:
 * @version:
 * @Author: congsir
 * @Date: 2023-10-20 23:31:33
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-10-20 23:34:04
 */
import React, { memo, useEffect, useState } from "react";
import { WrapperRight } from "./style";
import IconGlobal from "@/assets/svg/icon_global";
import IconAvatar from "@/assets/svg/icon_avatar";
import IconMenu from "@/assets/svg/icon_menu";

export default memo(function HeaderRight() {
  const [showPanel, setShowPanel] = useState(false);

  function profileClickHandle() {
    setShowPanel(true);
  }

  //副作用
  useEffect(() => {
    function windowHandle() {
      setShowPanel(false); //得考虑事件冒泡，点击profile后冒泡window又关闭
    }
    window.addEventListener("click", windowHandle, true);
    return () => {
      window.removeEventListener("click", windowHandle);
    };
  }, []);

  return (
    <WrapperRight>
      <div className="btns">
        <span className="btn">登录</span>
        <span className="btn">注册</span>
        <span className="btn">
          <IconGlobal />
        </span>
      </div>
      <div className="profile" onClick={profileClickHandle}>
        <IconMenu />
        <IconAvatar />
        {showPanel && (
          <div className="panel">
            <div className="top">
              <div className="item register">注册</div>
              <div className="item login">登录</div>
            </div>
            <div className="bottom">
              <div className="item">出租房源</div>
              <div className="item">开展体验</div>
              <div className="item">帮助</div>
            </div>
          </div>
        )}
      </div>
    </WrapperRight>
  );
});
